<template>
	<div class="commodity">
		<p>{{ item ? item.title : '商品名称' }}</p>
		<p :class="item ? 'price' : ''">{{ item ? item.price : '商品价格' }}</p>
		<p :class="item ? 'detail' : ''" @click="item ? toDetail(item.id) : ''">{{ item ? '详情' : '操作' }}</p>
	</div>
</template>

<script>
export default {
	name: 'commodity',
	props: ['item'],
	data() {
		return {};
	},
	watch: {},
	computed: {},
	created() {

	},
	mounted() {

	},
	methods: {
		toDetail(id) {
			// this.$router.push('/Detail?id=' + id);
			this.$router.push('/Detail/' + id);
		}
	}
};
</script>

<style lang="scss" scoped>
.commodity {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 2px solid #fff;

  .detail {
    cursor: pointer;
  }

  .price {
    margin-right: 24px;
  }
}
</style>